<template>
	<div class="backToTop-wrap" :class="{'active':visibile}" @click="backToTop(4)">
		<a href="javascript:">
			<svg-icon icon-class="backToTop"></svg-icon>
		</a>
	</div>
</template>

<script>
	export default{
		name:'BackToTop',
		props: {
			visibilityHeight: {
				type: Number,
				default: 200
			},
			backPosition: {
				type: Number,
				default: 0
			},
		},
		data(){
			return{
				visibile:false
			}
		},
		methods:{
			handleScroll(){
				this.visibile = window.pageYOffset > this.visibilityHeight
			},
			backToTop: function(rate){
				let doc = document.body.scrollTop ? document.body : document.documentElement
				let scrollTop = doc.scrollTop
			
				let top = function() {
					scrollTop = scrollTop + (0 - scrollTop) / (rate || 2)
			
					if(scrollTop < 1) {
						doc.scrollTop = 0
						return
					}
					doc.scrollTop = scrollTop
					requestAnimationFrame(top)
				}
				top()
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
		},
		beforeDestroy() {
			window.removeEventListener('scroll', this.handleScroll)
		}
	}
</script>

<style lang='scss' scoped>
	.backToTop-wrap{
		position: fixed;
		z-index: 1;
		right: 1rem;
		bottom: 1rem;
		width: 2.75rem;
		height: 2.75rem;
		-webkit-transition: opacity .25s,visibility .25s;
		transition: opacity .25s,visibility .25s;
		opacity: 0;
		visibility: hidden;
		color: #fff;
		border-radius: 99px;
		background-color: rgba(0,0,0,.6);
		&.active{
			opacity: 1;
			visibility: visible;
		}
		a{
			display: block;
			height: 100%;
			svg{
				position: absolute;
				width: 1rem;
				height: 1rem;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
</style>
